<template>
  <div id="divma">
    <el-button id="el-button" type="primary" icon="el-icon-arrow-left" @click="back">返回</el-button>
    <div id="divmale">
      <div id="tablediv">
        <p><span>添加资料</span></p>
      </div>
      <div id="mleupload">
        <el-upload ref='upload'  action="/gym/uploadImage" list-type="picture-card" name="image" :auto-upload="true" :limit="1" :on-success="upload">
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{ file }">
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url"
              alt=""/>
            <span class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)">
                <i class="el-icon-zoom-in"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleDownload(file)">
                <i class="el-icon-download"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)">
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
        <p id="mlespan2">
          建议正方形图片，大小不超过2M。支持格式jpg、jpeg、gif、png
        </p>
      </div>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
      <!-- ------------------------ -->
      <p id="mlep1">
        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
          id="el-form1">
          <p>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: red">*</span>
            姓名：&nbsp;
            <el-input v-model="formInline.name" placeholder="请输入"></el-input>
          </p>
          <p id="radioel">
            <span style="color: red">*</span> 性别：
            <el-radio id="radioel1" v-model="radio1" label="1">男</el-radio>
            <el-radio v-model="radio1" label="0">女</el-radio>
          </p>
          <p>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: red">*</span>
            手机：&nbsp;
            <el-input
              v-model="formInline.tel"
              placeholder="请输入手机号"
              oninput="value=value.replace(/[^\d]/g,'')"></el-input>
          </p>
          <p>
            <span style="color: red">*</span>
            从业时间：&nbsp;
            <el-input
              v-model="formInline.time"
              placeholder="请输入"
              oninput="value=value.replace(/[^\d]/g,'')"></el-input>
          </p>
          <p>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;签名：&nbsp;
            <el-input v-model="formInline.brief" placeholder="请输入"></el-input>
          </p>
          <p id="textar">
             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;简介：&nbsp;
            <el-form-item >
                <el-input :cols="24" type="textarea" v-model="formInline.desc"></el-input>
            </el-form-item>
          </p>
          <div id="mlebut2">
            <el-input
              class="input-new-tag"
              v-if="inputVisible"
              v-model="inputValue"
              ref="saveTagInput"
              size="medium"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm">
            </el-input>
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput">+ 擅长标签</el-button>
            <el-tag
              :key="tag"
              v-for="tag in dynamicTags"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)">
              {{ tag }}
            </el-tag>
          </div>
          <p id="mlecb">
            <span style="color: red">*</span> 所属场馆：&nbsp;&nbsp;&nbsp;
             <el-select v-model="formInline.regionplace" placeholder="批量操作">
              <el-option v-for="(v,i) in arr2" :key="i" :label="v.space_name" :value="v.id"></el-option>
            </el-select>
          </p>
          <p id="mlecb1">
            <span style="color: red">*</span> 账户启用状态：
            <el-radio id="mlecbcheckbox1" v-model="radio3" label="1">开启</el-radio>
            <el-radio v-model="radio3" label="2">不开启</el-radio>
          </p>
          <p>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: red"
              >*</span>
            用户名：
            <el-input v-model="formInline.username" placeholder="请输入"></el-input>
          </p>
          <p>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: red"
              >*</span>
            密码：&nbsp;
            <el-input v-model="formInline.pass" placeholder="请输入"></el-input>
          </p>
          <el-form-item>
            <el-button type="primary" @click="notarize">保存</el-button>
          </el-form-item>
        </el-form>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicTags: [], //标签
      inputVisible: false,
      inputValue: '',
      arr2:[],
      str:"", //图片地址
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false, //上传照片
      checkList: ["选中且禁用", "复选框 A"],
      value1: "",
      inputVisible: false,
      inputValue: "",
      radio1: "1",
      radio2: "1",
      radio3: "1",
      formInline: {
        name:"",
        time: "",
        brief:"",
        username: "",
        pass:"",
        regionplace:"",
        desc:""
      },
    };
  },

  methods: {
    back(){
      this.$router.back()
    },

    handleRemove(file) {
       this.$refs.upload.clearFiles();
    },

    upload(response, file, fileList){ //后台传来的图片
      this.str=response.data    
      console.log(this.str);
    },

    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    handleDownload(file) {
      console.log(file);
    },

    submitUpload() {
      this.$refs.upload.submit();
    },

    notarize() {  //添加教练
      this.$axios({
        url:"/gym/coach/add",
        method:"post",
        data:{
          image:this.str,
          name:this.formInline.name,
          sex:this.radio1,
          phone:this.formInline.tel,
          autograph:this.formInline.brief,
          introduction:this.formInline.desc,
          workingTime:this.formInline.time,
          specialty:this.dynamicTags.toString(),
          venueId:this.formInline.regionplace,
          status:this.radio3,
          username:this.formInline.username,
          password:this.formInline.pass
          // status:
        }
      }).then((res)=>{
        console.log(res);
         if (res.data.error) {
                this.$message.error("添加失败！");
              } else {
                this.$message.success("添加成功！");
                this.$router.push('/memberd')
              }
              this.con = "";
      });
    },

    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    getplace(){  //获取场地接口
     this.$axios({
      url:"/gym/venue/findAllSpace",
        }).then((res)=>{
       this.arr2= res.data.data;
       console.log( this.arr2);
      })
    },

     showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
  },

   mounted(){
    this.getplace()
  }
};
</script>

<style scoped lang="less">
#el-button{
  margin-left: 92%;
  margin-bottom: 10px;
  background: white;
  color: #b3b3b3;
  border: 1px solid #d3dce6;
};

#divmale {
  margin: 10px;
  border-radius: 5px 5px 0 0;
  border: 2px solid #dad9d9;
};

#tablediv {
  height: 20%;
  background: rgb(219, 219, 219);
  border-radius: 5px 5px 0 0;
  height: 30px;
  span {
    float: left;
    line-height: 30px;
    margin-left:10px ;
  }
};

.upload-demo {
  width: 300px;
  height: 120px;
  margin: 10px auto;
  margin-top: 30px;
};

.el-icon-upload {
  font-size: 50px;
  width: 50px;
};

.el-form-item {
  margin-left: 10px;
};

.el-form {
  display: inline;
};

.el-input {
  width: 220px;
  margin: 10px;
};

#mleupload {
  margin: 20px;
  margin-left: 80px;
  #mlespan2 {
    margin: 10px;
  }
};

#radioel {
  margin: 10px 10px 10px -50px;
};

#radioel1 {
  margin-left: 50px;
};

.block {
  margin-left: 25px;
};

.el-cascader {
  margin: 10px 5px;
  width: 220px;
};

#mlezy {
  margin: 10px 10px 10px 40px;
};

#mlebut1 {
  margin: 10px 10px 10px 50px;
};

#mlebut2 {
  line-height: 30px;
  margin:10px 0px 10px -70px;
  el-button {
    margin-left: 10px;
  }
};

.el-tag + .el-tag {
  margin-left: 10px;
};

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
};

#mleop {
  margin: 20px 10px 10px 30px;
};

#mlecb {
  margin: 20px 10px 10px 0px;
  #mlecbcheckbox{
    margin-left: 20px;
  }
};

#mlecb1 {
  margin: 20px 10px 10px -85px;
  #mlecbcheckbox1{
    margin-left: 20px;
  }
};

.el-tag + .el-tag {
    margin-left: 10px;
  };

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
};

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
};
</style>